﻿@model WebCalendar.Models.Category

@{
    ViewBag.Title = "CreateCategory";
}

<h2>CreateCategory</h2>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Calendar</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
        <div class="editor-label">
            @Html.Label("Color")
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Color) 
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <link href="~/Content/colorpicker/css/colorpicker.css" rel="stylesheet" />
    <script src="~/Content/colorpicker/js/colorpicker.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#Color').ColorPicker({
                onSubmit: function (hsb, hex, rgb, el) {
                    $(el).val(hex);
                    $(el).ColorPickerHide();
                },
                onBeforeShow: function () {
                    $(this).ColorPickerSetColor(this.value);
                }
            })
            .bind('keyup', function () {
                $(this).ColorPickerSetColor(this.value);
            });

        });
    </script>
}
